<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>项目列表</title>
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
</head>

<body>
    <div class="layui-card">
        <div class="layui-card" style="margin-top: 15px;">
            <div class=" layui-card-header layuiadmin-card-header-auto">积分充值列表</div>
            <div class="layui-card-body">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">上架状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="1">上架</option>
                                    <option value="0">下架</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 表格容器 -->
            <div class="layui-form">
                <table id="score" lay-filter="score"></table>
            </div>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加项目</button>
                </div>
           </script>
        </div>
    </div>

    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            $ = layui.$
            // 初始化表格
            table.render({
                elem: '#score',
                url: '/admin/scoreShop/list',
                parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": res.message,
                        "count": res.data.total,
                        "data": res.data.data
                    };
                },
                toolbar: '#toolbarDemo',
                title: '项目列表',

                cols: [[
                    { field: 'id', title: 'ID', width: 80, sort: true },
                    { field: 'score', title: '所需积分', width: 100, sort: true },
                    {
                        field: 'status', title: '状态', width: 80, templet: function (d) {
                            return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                        }
                    },
                    { field: 'money', title: '金额', width: 100, sort: true },
                    { field: 'sort', title: '权重', width: 80, sort: true },
                    { fixed: 'right', title: '操作', toolbar: '#tableBar', width: 150 }
                ]],
                page: true,
                limit: 10,
                limits: [10, 20, 30, 50],
            });

            // 监听搜索
            form.on('submit(searchBtn)', function (data) {
                var field = data.field;

                // 执行表格重载
                table.reload('score', {
                    where: field,
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                });
                return false; // 阻止表单默认提交

            });


            // 工具栏事件
            table.on('toolbar(score)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'add':
                        layer.open({
                            title: '添加项目',
                            type: 2,
                            area: ['80%', '80%'],
                            content: '/admin/scoreShop/add'
                        });
                        break;
                };
            });
            // 监听工具条
            table.on('tool(score)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑项目',
                        type: 2,
                        area: ['80%', '80%'],
                        content: '/admin/scoreShop/edit?id=' + data.id
                    });
                } else if (obj.event === 'del') {
                    layer.confirm('确认删除该项目？', function (index) {
                        $.ajax({
                            url: '/admin/scoreShop/del',
                            data: { id: data.id },
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.msg('删除成功', { icon: 1 });
                                    table.reload('score');
                                } else {
                                    layer.msg(res.msg || '删除失败', { icon: 2 });
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>

    <!-- 表格操作模板 -->
    <script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
</body>

</html>